<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="addSum">点击加1</button>
  </div>
</template>

<script>
export default {
  /* eslint-disable */
  name: "Person",
  data() {
    return {
      sum: 0,
    };
  },
  methods: {
    addSum() {
      this.sum += 1;
    },
  },
  // 创建前
  beforeCreate() {
    console.log("创建前,beforeCreate");
  },
  // 创建完毕
  created() {
    console.log("创建完毕,created");
  },
  // 挂载前
  beforeMount() {
    console.log("挂载前,beforeMount");
  },
  // 挂载完毕
  mounted() {
    console.log("挂载完毕,mounted");
  },
  // 更新前
  beforeUpdate() {
    console.log("更新前,beforeUpdate");
  },
  // 更新完毕
  updated() {
    console.log("更新完毕,updated");
  },
  // 销毁前
  beforeDestroy() {
    console.log("销毁前,beforeDestroy");
  },
  // 销毁完毕
  destroyed() {
    console.log("销毁完毕,destroyed");
  },
};
</script>

<style scoped>
.person {
  background-color: skyblue;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
